﻿@model List<PostInfo>
@using LiteBlog
@{
    this.ViewBag.Title = "Manage posts";
    this.Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var posts = new Posts();
            posts.loadJson(@Html.Json(Model));
            ko.applyBindings(posts, document.getElementById("main"));
         });
    </script>
}

<div id="main" class="hidden" data-bind="css: {hidden: false}">
    <h1>Posts</h1>
    <div>
        <input type="button" value="Compose Post" data-bind="click: add" />
    </div>
    <div class="success" data-bind="visible: successMessage, text: successMessage">
    </div>
    <div class="error" data-bind="visible: errorMessage, html: errorMessage">
    </div>
    <table class="grid">
        <thead>
            <tr>
                <th style="width: 12%">Quick Edit</th>
                <th style="width: 12%">Edit</th>
                <th style="width: 12%">Delete</th>
                <th style="width: 12%">Unpublish</th>
                <th style="width: 16%">Time</th>
                <th style="width: 36%">Title</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: collection">
            <tr data-bind="visible: !isEdit() && !isPreview(), css: { alternateRow: !isOdd() }">
                <td style="text-align: center"><a href="#" data-bind="click: edit">Quick Edit</a></td>
                <td style="text-align: center"><a data-bind="attr: {href: editLink}">Edit</a></td>
                <td style="text-align: center"><a href="#" data-bind="{click: remove}">Delete</a></td>
                <td style="text-align: center">
                    <a data-bind="visible: published, click: unpublish" href="#">Unpublish</a>
                    <span data-bind="visible: !published(), text: typeText"></span>
                </td>
                <td style="text-align: center" data-bind="text: time"></td>
                <td><a href="#" data-bind="{text: title, click: preview}"></a></td>
            </tr>
            <tr data-bind="visible: isPreview" style="background-color: #ccc">
                <td style="vertical-align: top; text-align: center"><a href="#" data-bind="click: closePreview">Close Preview</a></td>
                <td colspan="5" style="background-color: #eee" data-bind="html: previewHtml"></td>
            </tr>           
            <tr data-bind="visible: isEdit, css: { editRow: isEdit }">
                <td colspan="6">
                    <div class="form" style="width: 70%">
                        <div class="left" style="width: 20%">
                            Title:
                        </div>
                        <div class="right" style="width: 70%">
                            <input type="text" data-bind="value: title, valueUpdate: 'afterkeydown', css: { 'errorBox': title.hasError }" />
                        </div>
                        <div class="clear"></div>
                        <div class="left" style="width: 20%">
                            Categories:
                        </div>
                        <div class="right" style="width: 70%">
                            <select multiple="multiple" data-bind="{options: categories, selectedOptions: selectedCategories, optionsValue: function(item) { return item.id }, optionsText: function(item) { return item.name }}"></select>
                        </div>
                        <div class="clear"></div>
                        <div style="text-align: center">
                            <a href="#" data-bind="click: update">Update</a>
                            <a href="#" data-bind="click: close">Close</a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
